<template>
  <div className="home-all">
    <div className="home-title">
      
      <div className="home-title-run">
        <RouterLink
          to="/trends"
          style="float: left; margin-left: 10px; margin-top: 10px"
          :class="{ 'active-link': isTrendsActive }"
          @click="isTrendsActive = true"
          >动态</RouterLink>
        <RouterLink
          to="/school"
          style="float: left; margin-left: 10px; margin-top: 10px"
          :class="{ 'active-link': isSchoolActive }"
          @click="isSchoolActive = true"
          >校园聊</RouterLink
        >
        <RouterLink
          to="/run"
          style="float: left; margin-left: 10px; margin-top: 10px"
          :class="{ 'active-link': isRunActive }"
          @click="isRunActive = true"
          >一起跑</RouterLink
        >
      </div>
      <div className="home-title-button">
        <button @click="$router.push('/release')">+发动态</button>
      </div>
    </div>
    <div className="home-content">
      <RouterView></RouterView>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import "./index.css";
const isTrendsActive = ref(true);
const isSchoolActive = ref(false);
const isRunActive = ref(false);
</script>

<style lang="scss" scoped></style>
